<template>
        <div class="area-ranking">
          <img src="@/assets/images/area-ranking-title.png" alt="" />
          <div class="area-ranking-list">
            <div class="area-ranking-list-title">
              <span class="area-rank-title">排名</span>
              <span class="area-name">区域</span>
              <span class="use-total">使用次数</span>
              <span class="user-total">使用人数</span>
            </div>
            <div class="area-ranking-list-item" v-for="(item,index) in areaRankingList" :key="item">
              <span class="area-rank" >{{ index+1 }}</span>
              <span class="area-name">{{item.name}}</span>
              <span class="use-total">{{item.total}}</span>
              <span class="user-total">{{item.user_count}}</span>
            </div>
           

          </div>
        </div>
</template>

<script setup>
import * as echarts from "echarts";
import { onMounted ,ref} from "vue";
import {getAreaRanking} from "@/api/api.js";

const areaRankingList = ref([])

onMounted(()=>{
  getAreaRanking().then((res)=>{
    areaRankingList.value = res.data.slice(0,5)
  })
})


</script>

<style lang="scss" scoped>
  .area-ranking {
    display: flex;
    flex-direction: column;
    width: 48.62%;
    height: 100%;
    background: url("@/assets/images/3D-bg.png");
    background-size: 100% 100%;
    // background-color: rgba(20, 30, 43, 0.63);
    backdrop-filter: blur(5px); /* 创建毛玻璃效果 */
    > img {
      width: 100%;
    }
    &-list {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      box-sizing: border-box;
      width: 100%;
      height: 86.16%;
      padding: 4.09% 2.83%;

      &-title {
        display: flex;
        align-items: center;
        box-sizing: border-box;
        width: 100%;
        height: 12.9%;

        background: rgba(70, 70, 70, 0.35);
        color: rgb(255, 255, 255);
        font-family: Source Han Sans SC;
        font-size: 14px;
        font-weight: 700;

      }
      &-item{
        display: flex;
        align-items: center;
        box-sizing: border-box;
        width: 100%;
        height: 12.9%;
        color: rgb(255, 255, 255);
        font-family: Source Han Sans SC;
        font-size: 14px;
        font-weight: 700;
      }
    }

  }
  .area-rank-title {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 16.72%;
    }
    .area-rank {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 16.72%;
      color: rgb(24, 254, 254);
font-family: DIN;
font-size: 9px;
font-weight: 700;
    }
    .area-name {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 24.08%;
    }
    .use-total {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 34.11%;
    }

    .user-total {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 26.09%;
    }
</style>